/* eslint-disable no-unused-vars */
<!--
 * @页面名称: 数据集成
 * @描述:
 * @作者: 辛慰
 * @Date: 2019-06-11 17:35:26
 -->
<template>
  <div class="Home">
    <topHeader/>
    <div class="home">
      <img class="container-bg" src="../assets/warehouse_bg.jpg" alt>
      <div class="container">
        <div class="left">
          <div id="safe" class="item have-bg">
            <h6 class="item-title">设备状态</h6>
            <div class="circle-chart">
              <div class="donut-chart">
                <div class="progress-circle">
                  <svg
                    :width="radiusW"
                    :height="radiusH"
                    viewBox="0 0 100 100"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <!-- width/height表示svg的宽高,viewBox表示根据svg的宽高拉出来的大小 -->
                    <circle
                      class="progress-background"
                      r="50"
                      cx="50"
                      cy="50"
                      stroke-width="4.8"
                      fill="transparent"
                    ></circle>
                    <!-- r表示半径，cx 和 cy 属性定义圆点的 x 和 y 坐标 fill表示背景色 -->
                    <circle
                      stroke-linecap="round"
                      class="progress-bar"
                      r="50"
                      cx="50"
                      cy="50"
                      stroke-width="4.8"
                      fill="transparent"
                      :stroke-dasharray="dashArray"
                      :stroke-dashoffset="dashOffset"
                      style="transition: stroke-dashoffset 0.6s ease 0s"
                    ></circle>
                  </svg>
                  <div class="equipment-info">
                    <div class="enable-rate-text">启用率</div>
                    <div class="rate">
                      <span>{{ rate }}</span>
                      <span>%</span>
                    </div>
                    <div class="equipment-sum">总数: {{ currEquiqSum }}</div>
                  </div>
                </div>
              </div>
              <div class="tab-list">
                <div
                  :class="item.isActive ? 'tab-item active' : 'tab-item'"
                  ref="equipNo"
                  @mousemove="selectEquiq(item)"
                  @mouseout="removeEquip(item, index)"
                  v-for="(item, index) in equiqList"
                  :key="index"
                >{{ item.name }}<el-switch class="btns" v-model="item.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                </div>
              </div>
            </div>
          </div>
          <div class="item have-bg">
            <h6 class="item-title">电子标签进出记录</h6>
            <div class="time-rfid">
              <vue-seamless-scroll :data="rfidData" class="seamless-warp">
                <ul class="list-rfid">
                  <li class="item-rfid" v-for="(item,index) in rfidData" :key="index">
                    <div class="rfid-left">{{ item.datetime | moment('YYYY-MM-DD') }}</div>
                    <div class="rfid-center">
                      <div class="line"></div>
                      <div
                        class="circle in"
                        ref="circle"
                        @mousemove="scalein2(index)"
                        @mouseout="scaleout2(index)"
                      ></div>
                      <!-- <div
                        class="circle out"
                        v-if="item.status == 1"
                        ref="circle"
                        @mousemove="scalein1(index)"
                        @mouseout="scaleout1(index)"
                      ></div> -->
                    </div>
                    <div class="rfid-right">{{ item.message }}</div>
                  </li>
                </ul>
              </vue-seamless-scroll>
            </div>
          </div>
          <div class="item have-bg">
            <h6 class="item-title">库房监控视频</h6>
            <div class="archival-box" style="width: 80%;height: 70%;">
              <object
                type='application/x-vlc-plugin'
                id='Object1'
                width="100%"
                height="100%"
                events='True'
                pluginspage="http://www.videolan.org"
                codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
                <param name='mrl' value='rtsp://admin:@dmin123@192.168.1.202:554/h264/ch1/main/av_stream' />
                <param name='volume' value='50' />
                <param name='autoplay' value='true' />
                <param name='loop' value='false' />
                <param value="transparent" name="wmode">
              </object>
            </div>
          </div>
        </div>
        <div class="middle">
          <div class="middle-show">
            <img class="middle-bg" src="../assets/kuang-middle.png" alt>
            <div class="run-days">
              <p class="run-text">安全运行天数</p>
              <div class="run-day-box">
                <div class="run-day-item">{{ safeDays }}</div>
                <div class="run-day-text">天</div>
              </div>
            </div>
            <div class="scanning">
              <div class="radar"></div>
            </div>
            <div class="popup-warning">
              <div class="e-loadholder">
                <div class="m-loader">
                  <span class="e-text">
                    <div class="equip-warning">
                      <img class="warning-icon" src="../assets/image/normal.png">
                      <div class="equip-temp">温度正常</div>
                      <div class="create-time">{{ currentTime }}</div>
                    </div>
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="middle-item">
            <div class="tempt-box-one">
            </div>
            <div class="tempt-box-two">
              <div id="usingStatistical" style="width: 6rem; height: 2.4rem;"></div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="item have-bg">
            <h6 class="item-title">库房温度监控</h6>
            <div id="main" class="main" style="width: 1.8rem;height: 2rem"></div>
            <div class="tp-value">
              <div class="average-tp">27.5℃</div>
              <div class="average-tp">平均温度</div>
              <div class="average-tp">28.5℃</div>
              <div class="average-tp">最高温度</div>
              <div class="average-tp">26.5℃</div>
              <div class="average-tp">最低温度</div>
            </div>
          </div>
          <div class="item have-bg">
            <h6 class="item-title">库房湿度监控</h6>
            <!-- <div class="video-box no-padding-left"> -->
              <div class="humidity" id="humidity" style="width: 1.8rem;height: 1.6rem"></div>
              <div class="tp-value tp-b">
                <div class="average-hu">45.3%</div>
                <div class="average-hu">平均湿度</div>
                <div class="average-hu">50.1%</div>
                <div class="average-hu">最大值</div>
                <div class="average-hu">40.7%</div>
                <div class="average-hu">最小值</div>
              </div>
            <!-- </div> -->
          </div>
          <div class="item have-bg">
            <h6 class="item-title">设备消息</h6>
            <div class="table-item">
              <div class="v-table">
                <ul class="table-th">
                  <li class="table-th-item">时间</li>
                  <li class="table-th-item">类型</li>
                  <li class="table-th-item">消息</li>
                </ul>
                <div class="table-body">
                  <div class="table-body-item">
                    <vue-seamless-scroll :data="equipData" class="seamless-warp">
                      <div class="table-con" v-for="(item,index) in equipData" :key="index">
                        <ul class="item-ul even" v-if="item.type === 0">
                          <li class="item-li">{{ item.datetime | moment('YYYY-MM-DD') }}</li>
                          <li class="item-li">{{ item.type | changeType }}</li>
                          <li class="item-li">{{ item.message }}</li>
                        </ul>
                        <ul class="item-ul odd" v-else>
                          <li class="item-li">{{ item.datetime | moment('YYYY-MM-DD') }}</li>
                          <li class="item-li">{{ item.type | changeType }}</li>
                          <li class="item-li">{{ item.message }}</li>
                        </ul>
                      </div>
                    </vue-seamless-scroll>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import vueSeamlessScroll from 'vue-seamless-scroll'
import 'echarts-liquidfill/src/liquidFill.js'
import topHeader from '@/components/public/topHeader'
// import Vuetable from '@/components/vuetable'
import { setInterval, clearInterval } from 'timers'
// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入仪表盘组件
require('echarts/lib/chart/gauge')
// 引入饼图组件
require('echarts/lib/chart/pie')
require('echarts/lib/chart/scatter')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('../assets/css/style.css')

export default {
  name: 'home',
  components: {
    topHeader,
    vueSeamlessScroll
  },
  filters: {
    changeType: function (type) { // 过滤器,用来转换设备消息中的表格类型
      if (type === 0) {
        return '移动侦测'
      } else if (type === 1) {
        return '门禁'
      }
    }
  },
  data () {
    return {
      publicPath: process.env.BASE_URL,
      rfidData: [], // 电子标签进出记录数据
      equipData: [], // 移动侦测和门禁数据
      dashArray: Math.PI * 100,
      radiusW: '1.2rem',
      radiusH: '1.4rem',
      percent: 0,
      rate: 0,
      currEquiqSum: 58,
      equiqList: [
        // 设备数量及状态
        {
          name: '摄像头',
          enableNum: 18,
          equiqSum: 30,
          isActive: false,
          status: true
        },
        {
          name: '门',
          enableNum: 8,
          equiqSum: 15,
          isActive: false,
          status: false
        },
        {
          name: '灯',
          enableNum: 4,
          equiqSum: 12,
          isActive: false,
          status: false
        },
        {
          name: '空调',
          enableNum: 14,
          equiqSum: 20,
          isActive: false,
          status: true
        }
      ],
      num: 0,
      timer: null,
      currentTime: null, // 当前时间
      safeDays: null // 安全运行天数
    }
  },
  created () {
    this.currentTime = this.$dtime(new Date()).format('YYYY-MM-DD')
    this.getSafeData() // 获取安全运行天数
    this.getLiveFeed() // 获取实时消息数据
  },
  mounted () {
    // 基于准备好的dom，初始化echarts实例
    // 柱状图 usingStatistical
    let usingStatistical = echarts.init(document.getElementById('usingStatistical'))
    this.drawLine(usingStatistical)
    this.start()
    // 温度计图形
    let main = echarts.init(document.getElementById('main'))
    this.drawThermometer(main)
    // 湿度图形
    let humidity = echarts.init(document.getElementById('humidity'))
    this.drawHumidity(humidity)
  },
  // 页面销毁时清除定时器
  destroyed () {
    clearInterval(this.timer)
  },
  computed: {
    dashOffset () {
      return (1 - this.percent) * this.dashArray
    }
  },
  methods: {
    // 获取安全运行天数
    getSafeData () {
      localStorage.setItem('nowData', '2020-04-17')
      const nowData = localStorage.getItem('nowData')
      this.safeDays = this.DateMinus(nowData, this.$dtime(new Date()).format('YYYY-MM-DD')) + 47
    },
    // 获取实时消息
    getLiveFeed () {
      this.$http.post('/api/Device/GetDeviceEventList', {
        pagesize: 300,
        pageindex: 0,
        starttime: moment().subtract(2, 'days').format('YYYY-MM-DD'), // 获取前两天日期
        endtime: moment().format('YYYY-MM-DD')
      }).then((res) => {
        console.log(res)
        this.rfidData = res.data.data.records.filter(item => { // 获取实时消息中的rfid数据
          return item.type === 2
        })
        this.equipData = res.data.data.records.filter(item => { // 获取设备消息中的移动侦测和门禁数据
          return item.type === 0 || item.type === 1
        })
      })
    },
    // 当前日期减去运行日期获取安全运行天数
    DateMinus (date1, date2) {
      var sdate = new Date(date1)
      var now = new Date(date2)
      var days = now.getTime() - sdate.getTime()
      var day = parseInt(days / (1000 * 60 * 60 * 24))
      return day
    },
    // 绘制库房档案借阅统计图表
    drawLine (obj) {
      // 绘制图表
      obj.setOption({
        title: {
          text: '库房档案借阅统计',
          textStyle: {
            fontSize: 16,
            fontWeight: 'bolder',
            color: '#2c91a9'
          }
        },
        tooltip: {},
        barWidth: 20,
        xAxis: {
          data: ['档1', '档2', '档3', '档4', '档5', '档6'],
          axisLabel: {
            show: true,
            textStyle: {
              color: '#6495ED', // 更改坐标轴文字颜色
              fontSize: 12 // 更改坐标轴文字大小
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#315070' // 更改坐标轴颜色
            }
          }
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: '#48ccd9' // 更改坐标轴颜色
            }
          }
        },
        series: [
          {
            color: ['#1a681f'],
            name: '借阅量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#0154be' },
                  { offset: 1, color: '#188df0' }
                ])
              }
            }
          }
        ]
      })
      window.onresize = () => {
        obj.resize()
      }
    },
    // 绘制库房温度图表
    drawThermometer (obj) {
      let tpValue = 27.5
      let kd = []
      let Gradient = []
      // eslint-disable-next-line no-unused-vars
      let leftColor = ''
      let showValue = ''
      // eslint-disable-next-line no-unused-vars
      let boxPosition = [65, 0]
      // eslint-disable-next-line no-unused-vars
      let tpTxt = ''
      // 刻度使用柱状图模拟，短设置1，长的设置3；构造一个数据
      for (let i = 0, len = 110; i <= len; i++) {
        if (i < 10 || i > 110) {
          kd.push('')
        } else {
          if ((i - 10) % 10 === 0) {
            kd.push('-3')
          } else if ((i - 10) % 5 === 0) {
            kd.push('-1')
          } else {
            kd.push('')
          }
        }
      }
      // console.log(kd, "刻度");
      // console.log(tpValue,"温度")
      // 中间线的渐变色和文本内容
      if (tpValue > 20) {
        tpTxt = '温度偏高'
        Gradient.push(
          {
            offset: 0,
            color: '#93FE94'
          },
          {
            offset: 0.5,
            color: '#E4D225'
          },
          {
            offset: 1,
            color: '#E01F28'
          }
        )
      } else if (tpValue > -20) {
        tpTxt = '温度正常'
        Gradient.push(
          {
            offset: 0,
            color: '#93FE94'
          },
          {
            offset: 1,
            color: '#E4D225'
          }
        )
      } else {
        tpTxt = '温度偏低'
        Gradient.push({
          offset: 1,
          color: '#93FE94'
        })
      }
      if (tpValue > 42) {
        showValue = 42
      } else {
        if (tpValue < -40) {
          showValue = -40
        } else {
          showValue = tpValue
        }
      }
      if (tpValue < -10) {
        boxPosition = [65, -120]
      }
      leftColor = Gradient[Gradient.length - 1].color
      var option = {
        backgroundColor: 'rgba(0,0,0,0)',
        title: {
          text: '温度计',
          show: false
        },
        yAxis: [
          {
            show: false,
            data: [],
            min: 0,
            max: 120,
            axisLine: {
              show: false
            }
          },
          {
            show: false,
            min: 0,
            max: 50
          },
          {
            type: 'category',
            data: ['', '', '', '', '°C'],
            position: 'left',
            offset: -75,
            axisLabel: {
              fontSize: 10,
              color: 'white'
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        xAxis: [
          {
            show: false,
            min: -10,
            max: 40,
            data: []
          },
          {
            show: false,
            min: -10,
            max: 40,
            data: []
          },
          {
            show: false,
            min: -10,
            max: 40,
            data: []
          },
          {
            show: false,
            min: -5,
            max: 40
          }
        ],
        series: [
          {
            name: '条',
            type: 'bar',
            // 对应上面XAxis的第一个对)象配置
            xAxisIndex: 0,
            data: [
              {
                value: showValue + 50
              }
            ],

            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, Gradient)
              }
            },
            z: 2
          },
          {
            name: '白框',
            type: 'bar',
            xAxisIndex: 1,
            barGap: '-100%',
            data: [134],
            barWidth: 18,
            itemStyle: {
              normal: {
                color: '#0C2E6D',
                barBorderRadius: 50
              }
            },
            z: 1
          },
          {
            name: '外框',
            type: 'bar',
            xAxisIndex: 2,
            barGap: '-100%',
            data: [135],
            barWidth: 28,
            itemStyle: {
              normal: {
                color: '#4577BA',
                barBorderRadius: 50
              }
            },
            z: 0
          },
          {
            name: '圆',
            type: 'scatter',
            hoverAnimation: false,
            data: [0],
            xAxisIndex: 0,
            symbolSize: '30',
            itemStyle: {
              normal: {
                color: '#93FE94',
                opacity: 1
              }
            },
            z: 2
          },
          {
            name: '白圆',
            type: 'scatter',
            hoverAnimation: false,
            data: [0],
            xAxisIndex: 1,
            symbolSize: 40,
            itemStyle: {
              normal: {
                color: '#0C2E6D',
                opacity: 1
              }
            },
            z: 1
          },
          {
            name: '外圆',
            type: 'scatter',
            hoverAnimation: false,
            data: [0],
            xAxisIndex: 2,
            symbolSize: 50,
            itemStyle: {
              normal: {
                color: '#4577BA',
                opacity: 1
              }
            },
            z: 0
          },
          {
            name: '刻度',
            type: 'bar',
            yAxisIndex: 0,
            xAxisIndex: 3,
            label: {
              normal: {
                show: true,
                position: 'left',
                distance: 10, // 文字到刻度线的距离
                color: 'white',
                fontSize: 7,
                formatter: function (params) {
                  // console.log(params)
                  // console.log(params.dataIndex)
                  if (params.dataIndex > 100 || params.dataIndex < 20) {
                    return ''
                  } else {
                    if ((params.dataIndex - 10) % 10 === 0) {
                      return params.dataIndex - 50
                    } else {
                      return ''
                    }
                  }
                }
              }
            },
            barGap: '100%',
            data: kd,
            barWidth: 1,
            itemStyle: {
              normal: {
                color: 'white',
                barBorderRadius: 120
              }
            },
            z: 0
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      obj.setOption(option)
      window.onresize = () => {
        obj.resize()
      }
    },
    // 绘制库房湿度图表
    drawHumidity (obj) {
      let option = {
        backgroundColor: 'rgba(0,0,0,0)',
        tooltip: {
          show: true
        },
        series: [
          {
            type: 'liquidFill',
            name: '平均湿度',
            data: [
              {
                name: 'first Data',
                value: 0.453
              }
            ],
            label: {
              normal: {
                textStyle: {
                  fontSize: 8
                },
                formatter: '{a}\n{c}'
              }
            },
            period: function (value, index) {
              return 2000 * index + 1000
            }
          }
        ]
      }
      obj.setOption(option)
      window.onresize = () => {
        obj.resize()
      }
    },
    // 左上角的设备状态切换
    selectEquiq (obj) {
      this.equiqList.forEach(item => {
        item.isActive = false
      })
      obj.isActive = true
      this.percent = obj.enableNum / obj.equiqSum
      this.rate = (this.percent * 100).toFixed(2)
      this.currEquiqSum = obj.equiqSum
      clearInterval(this.timer)
    },
    removeEquip (obj, index) {
      this.num = index
      this.timer = setInterval(this.run, 1500)
    },
    start () {
      this.timer = setInterval(this.run, 1500)
    },
    run () {
      if (this.num === this.equiqList.length) {
        this.num = 0
      }
      let obj = this.$refs.equipNo
      // console.log(obj)
      // console.log(this.num)
      let cEquip = this.equiqList[this.num]
      obj.forEach(item => {
        item.classList.remove('active')
      })
      obj[this.num].classList.add('active')
      this.equiqList.forEach(item => {
        item.isActive = false
      })

      cEquip.isActive = true
      this.percent = cEquip.enableNum / cEquip.equiqSum
      this.rate = (this.percent * 100).toFixed(2)
      this.currEquiqSum = cEquip.equiqSum
      this.num++
    },
    // 电子标签进入出现阴影-移入事件
    scalein1 (index) {
      let nel = this.$refs.circle[index]
      nel.classList.add('dynamic1')
    },
    // 电子标签进入出现阴影-移出事件
    scaleout1 (index) {
      let nel = this.$refs.circle[index]
      nel.classList.remove('dynamic1')
    },
    scalein2 (index) {
      let nel = this.$refs.circle[index]
      nel.classList.add('dynamic2')
    },
    scaleout2 (index) {
      let nel = this.$refs.circle[index]
      nel.classList.remove('dynamic2')
    }
  }
}
</script>
<style lang="less" scoped>
@import '../assets/css/home.less';

</style>
